<template>
	<div id="topTabbarhome">
		<topTabbar />
		<div class="boxes">
			<div>
				<div class="box1a">
					<div class="box1b">
						<navBar :title="'维保照片'"></navBar>
						<el-carousel height="400px" v-if="images.length > 0">
							<el-carousel-item v-for="item in images" :key="item">
								<img class="icon" :src="item" alt="" />
							</el-carousel-item>
						</el-carousel>
						<div v-else class="noicon">未上传照片</div>
					</div>
				</div>
				<div class="box2a">
					<div class="box2b">
						<navBar :title="'维保记录'"></navBar>
						<record :listData="weibao" @transferimg="getimg" />
					</div>
				</div>
			</div>
			<div class="box3a">
				<div class="box3b">
					<navBar :title="'数据网点'"></navBar>
					<maps />
					<div class="msg" :class="{ msg2: showMsg == true }" @click="look">
						<img src="@/assets/img/h5.png" alt="" />
						<div class="nums" v-show="tableList.length > 0">{{ tableList.length }}</div>
					</div>
				</div>
			</div>
			<div>
				<div class="box4a">
					<div class="box4b">
						<navBar :title="'今日任务'"></navBar>
						<div class="boxback">
							<div class="n n1">
								<div>电梯数量</div>
								<div><numberGrow :value="tongji.dianti" :time="20"></numberGrow></div>
							</div>
							<div class="n n2">
								<div>今日维保</div>
								<div><numberGrow :value="tongji.day_num" :time="15"></numberGrow></div>
							</div>
							<div class="n n3">
								<div>销售点</div>
								<div><numberGrow :value="tongji.xiaoshou_sum" :time="15"></numberGrow></div>
							</div>
							<div class="n n4">
								<div>售后点</div>
								<div><numberGrow :value="tongji.shouhou_sum" :time="15"></numberGrow></div>
							</div>
						</div>
					</div>
				</div>
				<div class="box5a">
					<div class="box5b">
						<navBar :title="'客户反馈'"></navBar>
						<feedback :listData="tasks" @transferid="getid" />
					</div>
				</div>
			</div>
		</div>
		<div class="showtop" v-if="show">
			<div class="title">
				<div>告警消息</div>
				<div @click="show = false">X</div>
			</div>
			<div class="showbox boxA">
				<div class="b1">电梯地址</div>
				<div class="b2">维保人员</div>
				<div class="b3">时间</div>
				<div class="b4">操作</div>
			</div>
			<div class="overflow">
				<div class="showbox" v-for="(item, index) in tableList" :key="index">
					<div class="b1">{{ item.address }}</div>
					<div class="b2">{{ item.users }}</div>
					<div class="b3">{{ item.add_time }}</div>
					<div class="b4">
						<div class="b4b" @click="handle(item)">处理</div>
					</div>
				</div>
			</div>
		</div>

		<el-dialog ref="sub" title="处理" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
			<div class="dialogbox">
				<div class="box1">电梯名称：{{form.xmmc}}</div>
				<div class="box1">安装地址：{{form.address}}</div>
			</div>
			<div class="dialogbox">
				<div class="box1">维保人员：{{form.wbusername}}</div>
				<div class="box1">维保人员联系方式：{{form.wbuserphone}}</div>
			</div>
			<div class="dialogbox">
				<div class="box1">告警时间：{{form.add_time}}</div>
				<div class="box1">告警类型：{{form.codestr}}</div>
			</div>
			<div class="dialogbox">
				<div class="box1">呼叫器code：{{form.imei}}</div>
				<div class="box1">呼叫器号码：{{form.alarmphone}}</div>
			</div>
			<div class="dialogbox" style="margin: 20px 1%;">
				<div>处理信息：</div>
				<el-input type="textarea" v-model="form.remark"></el-input>
			</div>
			
			
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import echarts from 'echarts';
import numberGrow from '../components/numberGrow/index.vue';
import topTabbar from '../components/common/topTabbar/topTabbar.vue';
import navBar from '../components/common/navBar/navBar.vue';

import record from './record/record.vue';
import feedback from './feedback/feedback.vue';
import maps from './maps/maps.vue';
import { getdata, alarmList, alarmHandle } from '@/utills/ApiServices'; // 导入我们的api接口
import ReconnectingWebSocket from 'reconnecting-websocket';
export default {
	name: 'Home',
	components: {
		topTabbar,
		navBar,
		numberGrow,
		record,
		feedback,
		maps
	},
	data() {
		return {
			timer: null,
			show: false,
			showMsg: false,
			time: '',
			tongji: {
				dianti: 0,
				day_num: 0,
				xiaoshou_sum: 0,
				shouhou_sum: 0
			},
			tasks: [],
			weibao: [],
			images: [
				// require('@/assets/img/h13.png'),
				// require('@/assets/img/h13.png'),
				// require('@/assets/img/h13.png')
			],
			websocket: '',
			tableList: [
				// { id: 1, title: '电梯名称', name: '张三', time: '2023.11.07 13:48:38' },
				// { id: 2, title: '电梯名称', name: '张三', time: '2023.11.07 13:48:38' },
			],
			form: {	
				id:'',
				remark:'',
				xmmc: '',//电梯名称
				address: '',//电梯地址
				imei: '',//code
				alarmphone: '',//code
				wbusername: '',//维修人员
				wbuserphone: '',//维修人员电话
				add_time: '',//告警时间
				codestr: '',//告警类型
			},
			dialogFormVisible: false,
		};
	},
	created() {},
	mounted() {
		this.getdata();
		this.alarmList();
		this.timer = setInterval(() => {
			this.getdata();
			// }, 300000);
		}, 600000);

		// 创建 websocket 链接
		if (sessionStorage.getItem('token')) {
			this.createWebsocket();
		}
	},
	beforeDestroy() {
		if (this.timer) {
			//如果定时器还在运行 或者直接关闭，不用判断
			clearInterval(this.timer); //关闭
		}
	},
	// 页面注销时候调用 避免连接错误
	destroyed() {
		this.closeWebSocket();
	},
	methods: {
		// 获取当前时间和页面传参
		getTime() {
			var that = this;
			//获取时间
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			if (month < 10) {
				month = '0' + month;
			}
			if (day < 10) {
				day = '0' + day;
			}
			var nowDate = year + '-' + month + '-' + day;

			var h = date.getHours(); //获取小时
			var m = date.getMinutes(); //获取分钟
			var s = date.getSeconds(); //获取秒
			if (h < 10) {
				h = '0' + h;
			}
			if (m < 10) {
				m = '0' + m;
			}
			if (s < 10) {
				s = '0' + s;
			}
			var nowTime = h + ':' + m + ':' + s;
			// that.time = nowDate+' '+nowTime;
			return nowDate + ' ' + nowTime;
		},
		// 大屏数据
		async getdata() {
			const res = await getdata({ time: this.time });
			if (res.code == 1) {
				// console.log(res.data)
				this.time = this.getTime();
				this.tongji = res.data.tongji;
				this.tasks = res.data.tasks;
				this.weibao = res.data.weibao;
				if (res.data.images.length > 0) {
					let imgs = [];
					res.data.images.forEach((item) => {
						imgs.push(item.image);
					});
					this.images = imgs;
				}
			}
		},
		// 预警数据列表
		async alarmList(type) {
			this.tableList = [];
			const res = await alarmList();
			if (res.code == 1) {
				// console.log(res.data)
				this.tableList = res.data;
				if (type == 1) {
					this.show = true;
				}
			}
		},
		getimg(img) {
			// console.log(img.split(','));
			if (img) {
				this.images = img.split(',');
			} else {
				this.images = [];
				this.$alert('该记录未上传照片', '现场照片', {
					confirmButtonText: '确定',
					callback: (action) => {}
				});
			}
		},
		getid(id) {
			console.log(id);
		},
		look() {
			this.alarmList(1);
		},
		handle(item) {
			console.log(item)
			this.form.id = item.id;
			this.form.xmmc = item.xmmc;
			this.form.address = item.address;
			this.form.wbusername = item.wbuser.name;
			this.form.wbuserphone = item.wbuser.phone;
			this.form.add_time = item.add_time;
			this.form.codestr = item.codestr;
			this.form.imei = item.dt.imei;
			this.form.alarmphone = item.dt.alarm_phone;
			this.dialogFormVisible = true;
		},
		async submit() {
			if(!this.form.remark){
				this.$message({
					type: 'info',
					message: '请输入处理信息'
				});
				return
			}
			const res = await alarmHandle({ id: this.form.id, remark: this.form.remark });
			if (res.code == 1) {
				this.show = false;
				this.form.remark = '';
				this.dialogFormVisible = false;
				this.alarmList();
				this.$message({
					type: 'success',
					message: '操作成功！'
				});
			}
		},
		// 创建 websocket 链接
		createWebsocket() {
			// this.websocket = new ReconnectingWebSocket(`ws://101.89.139.179:2346`);
			this.websocket = new ReconnectingWebSocket(`wss://admin.xlddt.com/wss`);
			// 连接发生错误的回调方法
			this.websocket.onerror = this.websocketOnerror;
			// 连接成功建立的回调方法
			this.websocket.onopen = this.websocketOnopen;
			// 接收到消息的回调方法
			this.websocket.onmessage = this.websocketOnmessage;
			// 连接关闭的回调方法
			this.websocket.onclose = this.websocketOnclose;
			// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			this.websocket.onbeforeunload = this.websocketOnbeforeunload;
		},
		// 连接发生错误的回调方法
		websocketOnerror() {
			// console.log('连接发生错误的回调方法');
		},
		// 连接成功建立的回调方法
		websocketOnopen() {
			// console.log('连接成功建立的回调方法');
			console.log('持续连接中...');
		},
		// 接收到消息的回调方法
		websocketOnmessage(event) {
			let that = this;
			const data = JSON.parse(event.data);
			if (data.dt.sydw) {
				let users = [];
				if (data.wbuser.length) {
					data.wbuser.forEach((item) => {
						users.push(item.name);
					});
				}
				let str = {
					id: data.dt.id,
					address: data.dt.address,
					users: users.toString(),
					sydw: data.dt.sydw,
					add_time: data.add_time
				};
				// console.log(str)
				that.tableList.unshift(str);//插入列表
				
				// 弹出详情处理
				that.form.id = data.dt.id;
				that.form.xmmc = data.dt.xmmc;
				that.form.address = data.dt.address;
				that.form.wbusername = data.wbuser.name;
				that.form.wbuserphone = data.wbuser.phone;
				that.form.add_time = data.add_time;
				that.form.codestr = data.codestr;
				that.form.imei = data.dt.imei;
				that.form.alarmphone = data.dt.alarm_phone;
				that.dialogFormVisible = true;
				
				that.showMsg = true;
				setTimeout(function () {
					that.showMsg = false;
				}, 5000);
			}
			console.log('接收到消息，弹出最新警报', data);
		},
		// 连接关闭的回调方法
		websocketOnclose() {
			console.log('连接关闭的回调方法');
		},
		// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
		websocketOnbeforeunload() {
			this.closeWebSocket();
			console.log('监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常');
		},
		// 关闭WebSocket连接
		closeWebSocket() {
			this.websocket.close();
		},
	}
};
</script>

<style scoped lang="scss">
#topTabbarhome {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	overflow: hidden;
	width: 1920px;
	height: 1080px;
	background-image: url('../assets/img/h1.png');
	background-size: 100% 100%;
	color: #fff;
	font-size: 16px;
	.showtop {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		transform: translate(-50%, -50%);
		width: 586px;
		height: 392px;
		background-image: url('../assets/img/h6.png');
		background-size: 100% 100%;

		.title {
			font-size: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 28px 15px 44px;
		}

		.showbox {
			text-align: center;
			padding: 5px 2%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			margin-bottom: 10px;

			.b1 {
				width: 25%;
			}
			.b2 {
				width: 18%;
				margin: 0 1%;
			}
			.b3 {
				width: 35%;
			}
			.b4 {
				width: 15%;
				.b4b {
					font-weight: bold;
					color: #1ad2e9;
					font-size: 14px;
					border: 1px solid #1ad2e9;
					padding: 2px 5px;
					width: 60%;
					margin: 0 20%;
				}
			}

			div {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.boxA {
			font-size: 18px;
		}
		.overflow {
			height: 280px;
			overflow: auto;
			-ms-overflow-style: none; /* 隐藏IE和Edge中的滚动条 */
			scrollbar-width: none; /* 隐藏Firefox中的滚动条 */
		}
		/* 隐藏Chrome和Safari中的滚动条 */
		.overflow::-webkit-scrollbar {
			display: none;
		}
	}
	.boxes {
		box-sizing: border-box;
		padding: 23px 20px 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.box1a {
			width: 466px;
			height: 480px;
			margin-bottom: 20px;
			border-radius: 8px;
			padding: 10px;
			box-sizing: border-box;
			border: 1px solid #007eee;

			.box1b {
				width: 446px;
				height: 460px;
				border-radius: 8px;
				border: 3px solid #007eee;
				.icon {
					margin-top: 15px;
					width: 440px;
					height: 400px;
					border-radius: 8px;
				}
				.noicon {
					font-size: 18px;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fdf8f7;
					line-height: 400px;
					text-align: center;
				}
			}
		}
		.box2a {
			width: 466px;
			height: 452px;
			// background-image: url("../assets/img/h3.png");
			// background-size: 100% 100%;
			border-radius: 8px;
			padding: 10px;
			box-sizing: border-box;
			border: 1px solid #007eee;

			.box2b {
				width: 446px;
				height: 432px;
				border-radius: 8px;
				border: 3px solid #007eee;
			}
		}
		.box3a {
			width: 1000px;
			height: 952px;
			border-radius: 8px;
			padding: 10px;
			margin: 0 20px;
			box-sizing: border-box;
			border: 1px solid #007eee;

			.box3b {
				border: 3px solid #007eee;
				border-radius: 8px;
				width: 980px;
				height: 932px;
				position: relative;
				z-index: 1;

				.msg {
					position: absolute;
					top: 74px;
					right: 17px;
					z-index: 2;
					border: 1px solid #007eee;
					border-radius: 50%;
					background: #072e7d;
					padding: 12px;
					.nums {
						position: absolute;
						top: 0px;
						left: -18px;
						background: #ff6161;
						width: 35px;
						height: 22px;
						line-height: 22px;
						text-align: center;
						border-radius: 20px;
					}
					img {
						width: 30px;
						height: 30px;
						flex-shrink: 0;
					}
				}
				.msg2 {
					animation: myfirst 1s;
					animation-iteration-count: infinite;
				}
				@keyframes myfirst {
					50% {
						background: red;
						border-radius: 50%;
					}
				}
			}
		}
		.box4a {
			width: 373px;
			height: 375px;
			border-radius: 8px;
			padding: 10px;
			box-sizing: border-box;
			border: 1px solid #007eee;
			margin-bottom: 20px;

			.box4b {
				width: 353px;
				height: 355px;
				border-radius: 8px;
				border: 3px solid #007eee;

				.boxback {
					width: 275px;
					height: 247px;
					background-image: url('../assets/img/h4.png');
					background-size: 100% 100%;
					margin: 35px 34px 0 38px;
					position: relative;
					text-align: center;

					.n div:first-child {
						font-size: 14px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fdf8f7;
						margin-bottom: 8px;
					}
					.n div:last-child {
						font-size: 21px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fdf8f7;
						text-shadow: 0px 3px 24px rgba(0, 30, 45, 0.53);
						-webkit-text-stroke: 1px #ffffff;
						text-stroke: 1px #ffffff;
						background: linear-gradient(0deg, rgba(62, 242, 255, 0.36) 0%, rgba(222, 222, 222, 0.36) 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.n1 {
						// background: #007EEE;
						width: 80px;
						position: absolute;
						top: 13.3%;
						left: 12px;
					}
					.n2 {
						width: 80px;
						position: absolute;
						top: 13.3%;
						right: 12px;
					}
					.n3 {
						width: 80px;
						position: absolute;
						bottom: 15.6%;
						left: 12px;
					}
					.n4 {
						width: 80px;
						position: absolute;
						bottom: 15.6%;
						right: 12px;
					}
				}
			}
		}
		.box5a {
			width: 373px;
			height: 557px;
			border-radius: 8px;
			padding: 10px;
			box-sizing: border-box;
			border: 1px solid #007eee;

			.box5b {
				width: 353px;
				height: 537px;
				border-radius: 8px;
				border: 3px solid #007eee;
			}
		}
	}
	.dialogbox{
		display: flex;
		align-items: center;
		white-space: nowrap;
		font-size:18px;
		.box1{
			width: 48%;
			margin: 20px 1%;
		}
	}
}
</style>
